<template>
	<view class="page">
		<view class="tabbar">
			<view class="item" :class="tabActive == 0?'active':''" @click="changeTab(0)">
				<text>已预约</text>
			</view>
			<view class="item" :class="tabActive == 1?'active':''" @click="changeTab(1)">
				<text>已完成</text>
			</view>
		</view>
		<view class="scroll-box">
			<view class="item" v-for="item in dataList" @click="goDetail(item)">
				<view class="title">
					订单编号：{{item.no}}
					<text v-if="item.state == 1">已完成</text>
				</view>
				<view class="content">
					<view class="name">
						{{item.shop_name}}
					</view>
					<view class="time">
						预约时间：{{item.appointmenttime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: "",
				hasLogin:"",
				dataList:[],
				tabActive:0,
			}
		},
		methods: {
			changeTab(tab) {
				this.tabActive = tab;
				this.getList()
			},
			back() {
				uni.navigateBack();
			},
			getList(){
				this.$get('appointment/appointmentlist', {
					page: 1,
					pagesize: 1000,
					state:this.tabActive,
				}, (res) => {
					this.dataList = res
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: "/pages/appointment/detail?appointmentId=" + item.id
				})
			}
		},
		onShow(options) {
			this.hasLogin = !!uni.getStorageSync('token');
			if(this.hasLogin){
				this.tabActive = 0;
				this.getList()
			}
		},
	}
</script>

<style>
	.tabbar {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.tabbar .item{
		width: 50%;
		float: left;
		text-align: center;
	}
	.tabbar .item.active{
		color: #FE0520;
	}
	.tabbar .item.active text{
		border-bottom: 4rpx solid #FE0520;
		line-height: 80rpx;
		display: inline-block;
		padding: 0 10rpx;
	}
	.scroll-box{
		height: calc(100vh - 90rpx);
	}
	.scroll-box .item{
		width: 700rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin: 20rpx auto 0;
		background-color: #FFFFFF;
	}
	.scroll-box .item .title{
		line-height: 88rpx;
		padding: 0 24rpx;
		background: #FFE4E6;
		color: #FE0520;
		font-size: 28rpx;
	}
	.scroll-box .item .title text{
		float: right;
		color: #666666;
	}
	.scroll-box .item .content{
		padding: 24rpx;
	}
	.scroll-box .item .content .name{
		font-size: 34rpx;
		color: #333333;
		font-weight: bold;
	}
	.scroll-box .item .content .time{
		color: #666666;
		margin-top: 12rpx;
		font-size: 28rpx;
	}
</style>
